<template>
  <div>
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      @click-left="back"
    />
    <div class="addressbox"></div>
    <!-- 收货地址 -->
    <div class="address" @click="$router.push('/address')">
      <div v-if="$route.query.item" class="box">
        <p>
          姓名：{{
            item.name
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号：{{
            item.tel
          }}
        </p>

        <p>
          <van-tag plain type="primary" v-if="item.isDefault">默认</van-tag>
          <van-tag plain type="primary">学校</van-tag>
          地址：{{ item.address }}
        </p>
      </div>

      <div class="btn" v-else>
        <p>+点击完善地址</p>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="shop">
      <van-card
        v-for="item in orderlist"
        :key="item.id"
        :num="item.num"
        :price="item.price | toPrice"
        :title="item.goodsname"
        :thumb="item.img"
      />
    </div>

    <van-submit-bar
      :price="price * 100"
      button-text="确认订单"
      @submit="submit"
    >
    </van-submit-bar>
  </div>
</template>


<script>
export default {
  data() {
    return {
      orderlist: localStorage.getItem("cartinfo")
        ? JSON.parse(localStorage.getItem("cartinfo"))
        : [],
      price: localStorage.getItem("price"),
      item: this.$route.query.item
        ? JSON.parse(decodeURI(this.$route.query.item))
        : undefined,
    };
  },
  methods: {
    submit() {
      // console.log(1111);
      this.$toast("这是跳转到提交订单，没有接口 算了吧");
    },
    back(){
      // console.log(123);
      this.$router.push('/cart')
    }
  },
};
</script>


<style scoped lang="less">
.van-nav-bar__content {
  background: #ff6700;

  .van-nav-bar__left {
    .van-icon {
      color: #fff;
      font-size: 0.25rem;
    }
  }
}
.addressbox {
  width: 100%;
  height: 1.5rem;
  background: #ff6700;
  overflow: hidden;
}
.address {
  width: 6.5rem;
  height: 1.5rem;
  background: #fff;
  position: absolute;
  top: 0.8rem;
  left: 0.5rem;
}
.btn {
  width: 3rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  background: #fcf7ec;
  color: #dc9751;
  border-radius: 0.06rem;
  margin: 0.4rem auto 0;
  font-size: 0.24rem;
}
.shop {
  width: 100%;
  height: auto;
  background: #f2f2f2;
  padding-top: 0.6rem;
  box-sizing: border-box;
}
.van-card {
  background-color: #fff;
}
.van-card__price-integer,
.van-card__price-currency,
.van-card__price-decimal {
  color: #ff6700;
}
.van-submit-bar__text {
  text-align: left;
}
.box {
  background: skyblue;
  font-size: 0.2rem;
  overflow: hidden;
}
.box p {
  margin: 0.3rem auto;
}
</style>